<template>
  <div class="app">
    <h1 class="title">App组件</h1>
    <hr />
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" />
  </div>
</template>

<script setup lang="ts" name="App">
import useMsgRef from '@/hooks/useMsgRef.ts'

// 使用Vue提供的默认ref定义响应式数据，数据一改变，页面就更新
// let msg = ref('你好')

// 使用useMsgRef 来定义一个响应式数据且有延迟效果【使用hooks封装的】
let { msg } = useMsgRef('尚硅谷', 2000)
</script>

<style>
.app {
  background: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}
</style>
